<template>
  <a-carousel class="swiper" autoplay>
    <div class="banner" v-for="item in pbanners" :key="item.img">
      <!-- 图片 -->
      <img :src="item.img" alt="banner" />
      <!-- 文字 -->
      <div class="banner-box">
        <div class="banner-font">
          <h2>{{ item.text.mainTit }}</h2>
          <p>{{ item.text.subhead }}</p>
        </div>
        <div
          class="button"
          v-show="item.type"
        >
          {{ item.text.btnCon }}
        </div>
      </div>
    </div>
  </a-carousel>
</template>
<script>
export default {
  name: "Swiper",
  data() {
    return {};
  },
  props: {
    pbanners: {
      type: Array,
      default() {
        return [];
      },
    },
  },
};
</script>

<style lang="scss" scoped>

  .ant-carousel >>> .slick-slide {
    text-align: center;
    overflow: hidden;
  }

  .banner {
    position: relative;
  }

  img {
    width: 100%;
  }

  .banner-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .banner-font {
    text-align: center;
  }

  .banner-font h2 {
    font-size: 5.6rem;
    line-height: 5.6rem;
    font-weight: 1000;
    color: #fff;
    white-space: nowrap;
  }

  .banner-font p {
    font-size: 2.4rem;
    line-height: 2.4rem;
    color: #fff;
    margin: 2.4rem 0;
  }

  .button {
    width: 8.8rem;
    height: 3.2rem;
    border: 0.1rem solid #fff;
    border-radius: 0.4rem;
    color: #fff;
    line-height: 3.2rem;
    text-align: center;
  }

  .button:hover {
    background-color: #fff;
    color: #333;
  }

  @media screen and (max-width: 375px) {
    .swiper {
      .banner {
        height: 16rem;
        img {
          height: 100%;
        }
        .banner-box {
          .banner-font {
            text-align: center;
            h2 {
              font-size: 2.4rem;
              white-space: nowrap;
              margin: 0;
            };
            p {
              font-size: 1.2rem;
              margin: 0;
            }
          };
          .button {
            display: none;
          }
        };
      }
    }
  }

</style>
